<ng-template
  cdk-connected-overlay
  [cdkConnectedOverlayOrigin]="cdkConnectedOverlayOrigin"
  [cdkConnectedOverlayWidth]="originWidth"
  [cdkConnectedOverlayPositions]="pickerPositions"
  [cdkConnectedOverlayOpen]="isOpen"
  (backdropClick)="isOpen = false"
  (positionChange)="onPositionChange($event)"
>
  <div
    [@fadeInOut]="startAnimation ? dropdownPosition : 'void'"
    (@fadeInOut.done)="animationEnd($event)"
    [@.disabled]="!showAnimation"
    class="devui-time-picker-wrapper devui-dropdown-menu"
    #timePicker
  >
    <div class="devui-time-picker" [ngClass]="{ 'devui-time-picker-animation': showAnimation }">
      <ul *ngIf="firstList.length" class="devui-time-list devui-first-list">
        <li
          *ngFor="let item of firstList"
          class="devui-time-item devui-first-item"
          [ngClass]="{
            active: item.active,
            disabled: item.disabled
          }"
          (click)="chooseTime(item)"
        >
          {{ item.time }}
        </li>
      </ul>
      <ul *ngIf="secondList.length" class="devui-time-list devui-second-list">
        <li
          *ngFor="let item of secondList"
          class="devui-time-item devui-second-item"
          [ngClass]="{
            active: item.active,
            disabled: item.disabled
          }"
          (click)="chooseTime(item)"
        >
          {{ item.time }}
        </li>
      </ul>
      <ul *ngIf="thirdList.length" class="devui-time-list devui-third-list">
        <li
          *ngFor="let item of thirdList"
          class="devui-time-item devui-third-item"
          [ngClass]="{
            active: item.active,
            disabled: item.disabled
          }"
          (click)="chooseTime(item)"
        >
          {{ item.time }}
        </li>
      </ul>
    </div>
    <div class="devui-time-footer">
      <ng-container *ngIf="!customViewTemplate">
        <div class="devui-btn-wrapper">
          <d-button bsStyle="common" [disabled]="disabled" (btnClick)="confirmTime()" bsSize="sm"
            >{{ i18nCommonText?.btnConfirm }}
          </d-button>
        </div>
      </ng-container>
      <ng-container *ngIf="customViewTemplate">
        <ng-template
          [ngTemplateOutlet]="customViewTemplate"
          [ngTemplateOutletContext]="{ $implicit: this, chooseTime: chooseTime, clearAll: clearAll, confirmTime: confirmTime }"
        ></ng-template>
      </ng-container>
    </div>
  </div>
</ng-template>
